<template>
    <div>
      <el-row>
        <el-col :span="24"><canvas id="canvas"></canvas></el-col>
      </el-row>
      {{this.$route.query.id}}
      <el-button size="medium" type="success" @click="alipay_trade_page_pays()" >
         支付宝支付
      </el-button>
      <el-button size="medium" type="success" @click="Wxpay()" >
        <el-row>
          <el-col :span="24"> {{message}} </el-col>
        </el-row>
        微信支付
      </el-button>
      <el-button size="medium" type="success" @click="facere()" >
        扫脸支付
      </el-button>
    </div>
</template>

<script>
import { alipay_trade_page_pay,aggregationPay } from '@/api/alipay/pay'

import { listOrder, getOrder, delOrder, addOrder, updateOrder,myOrderList } from "@/api/order/order";
import QRCode from 'qrcode'

export default {
  name: 'index',
  data(){
    return{
      total_amount:null,
      out_trade_no:null,
      subject:null,
      body:'测试',
      message:'',
      alipay_trade_query_result:'',
      alipay_trade_page_pay_result:'',
      orderid:null,
      code_url:null
    }
  },
  created() {
    this.orderid=this.$route.query.id;
  },
  methods:{
    alipay_trade_page_pays(){
      let payType= 1;
      aggregationPay(this.orderid,payType).then(res=>{
        debugger
        if(res!= null){
          debugger
          let form = res;
          //创建容器将返回的表单放进去然后新开一个页面
          const div = document.createElement('div')
          div.innerHTML = form//此处form就是后台返回接收到的数据
          document.body.appendChild(div)
          document.forms[0].setAttribute('target','_blank');//或者 myForm.target='_parent';
          document.forms[0].submit()
        }else{
          this.$message.error("程序异常")
        }
      })
    },
    Wxpay(){
      let payType= 2;
      aggregationPay(this.orderid,payType).then(res=>{
        if(res){
            this.code_url = res;
          this.createQRcode()
        }
      })
    },
    // orderIdfind(){
    //   getOrder(this.orderid).then(res=>{
    //     debugger
    //       this.out_trade_no =  this.orderid;
    //       this.total_amount =  this.res.data.totalAmount;
    //       this.subject = this.res.data.cuserName;
    //
    //   })
    // },
    facere(){
      let payType= 3;
      aggregationPay(this.orderid,payType).then(res=>{
        debugger
            this.$message.success(res);
      })
    }
,
    createQRcode(){
      var canvas = document.getElementById('canvas');
      //debugger
      QRCode.toCanvas(canvas, this.code_url, (error)=> {
        if (error) {
          console.error(error)
        }else{
          console.log('success!');
        }
      });
    }

  }
}
</script>

<style scoped>

</style>
